<template>
    <div class="index-menu-bar">
        <router-link to="/index" class="list on">
            <span class="icon icon-home"></span>
            <i>首页</i>
        </router-link>
        <router-link to="/index" class="list">
            <span class="icon icon-type"></span>
            <i>分类</i>
        </router-link>
        <router-link to="/index" class="list">
            <span class="icon icon-shop"></span>
            <i>购物车</i>
        </router-link>
        <router-link to="/index" class="list">
            <span class="icon icon-order"></span>
            <i>我的订单</i>
        </router-link>
        <router-link to="/index" class="list">
            <span class="icon icon-user"></span>
            <i>我</i>
        </router-link>
    </div>
</template>

<script>
export default {
  name: "myfooter"
};
</script>

<style scoped lang="less">
.index-menu-bar {
  height: 98px;
  width: 750px;
  background-color: #ff8f00;
  .list {
    text-align: center;
    width: 150px;
    height: 98px;
    float: left;
    color: #fff;
    &.on {
      background-color: #eab826;
    }
    i {
      font-size: 24px;
      color: #fff;
    }
    .icon {
      width: 60px;
      height: 60px;
      display: block;
      margin: 0 auto;
    }
    .icon-home {
      background: url("../pagse/img/icon-home.png") no-repeat;
      background-size: 60px 60px;
    }
    .icon-type {
      background: url("../pagse/img/icon-type.png") no-repeat;
      background-size: 60px 60px;
    }
    .icon-shop {
      background: url("../pagse/img/icon-shop.png") no-repeat;
      background-size: 60px 60px;
    }
    .icon-order {
      background: url("../pagse/img/icon-order.png") no-repeat;
      background-size: 60px 60px;
    }
    .icon-user {
      background: url("../pagse/img/icon-user.png") no-repeat;
      background-size: 60px 60px;
    }
  }
}
</style>